<script setup lang="ts">
import { TableColumnsType } from 'ant-design-vue';
import { tableData } from '@/data/tableData';
import { itemDetail } from '@/data/typeData';
const columns: TableColumnsType = [
  {
    title: 'name',
    dataIndex: 'username',
  },
  {
    title: 'age',
    dataIndex: 'age'
  },
  {
    title: 'sex',
    dataIndex: 'sex'
  },
  {
    title: 'hobby',
    key: 'hobby',
    dataIndex: 'detail'
  },
  {
    title: 'address',
    dataIndex: 'detail',
    key: 'detail.address',
    customRender: ({value}) => value.address
  },
  {
    title: 'telephone',
    dataIndex: 'detail',
    key: 'detail',
    customRender: ({value}) => value.telephone
  }
]
</script>

<template>
  <a-table
    class="table"
    :dataSource="tableData"
    :columns="columns"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.key === 'hobby'">
        <span>{{ text.hobby }}</span>
      </template>
    </template>
  </a-table>
</template>


<style scoped>
.table {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  transform: translate(-50%, -50%);
}
</style>